<template>
  <div class="seleteFoodInfo">
    <h3 class="selectName">{{orderInfo.shopInfo.name}}</h3>
    <ul>
      <li v-for="(item,index) in orderInfo.selectFoods" :key="index">
        <img src="https://fuss10.elemecdn.com/e/9a/dffcc256685a065f9511215c6afedpng.png" alt="">
        <span class="foodName">{{item.name}}</span>
        <span class="count">×{{item.count}}</span>
        <div class="price">￥{{item.activity.fixed_price}}</div>
      </li>
    </ul>
    <div class="delivery-fee">
      <span>配送费</span>
      <span class="fee">{{orderInfo.shopInfo.float_delivery_fee}}</span>
    </div>
    <div class="total">
      <span>小计 ￥</span>
      <h3 class="price">{{totalPrice}}</h3>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SelectFoodInfo',
  props: {
    orderInfo: Object,
    totalPrice: Number
  }
}
</script>

<style lang="less" scoped>
.seleteFoodInfo {
  background-color: #fff;
  margin-top: 20px;
  color: #333;
  .selectName {
    padding-left: 10px;
  }
  ul {
    li {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 10px;
      img {
        width: 60px;
        height: 60px;
      }
      .foodName {
        font-weight: 700;
      }
    }
  }
  .delivery-fee {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
  }
  .total {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 10px 0;
    .price {
      font-size: 25px;
    }
  }
}
</style>
